<template>
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>
            <div>
                 <img src="../assets/logo.png" alt="">
                 <span>扶贫助农平台</span>
            </div>
            <div>
                <el-button type="info" @click="$router.push('/index')">返回首页</el-button>
            </div>
        </el-header>
        <!-- 主体部分 -->
        <el-container>
            <el-aside width="200px">

                <el-menu :router="true"
                background-color="rgb(234,232,233)"
                text-color="black"
                >
                    <!-- 主页 -->
                    <el-menu-item index="/welcome">
                        <i class="el-icon-location"></i>
                        <span slot="title">欢迎页</span>
                    </el-menu-item>
                    <!-- 志愿者 -->
                    <el-submenu index="b">
                        <template slot="title">
                            <i class="el-icon-edit-outline"></i>
                            <span>志愿者</span>
                        </template>
                        <el-menu-item index="/zhiyuanzhe">志愿者管理</el-menu-item>
                    </el-submenu>

                    <!-- 留言板 -->
                    <el-submenu index="c">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span>留言板</span>
                        </template>
                        <el-menu-item index="/liuyanban">留言板管理</el-menu-item>
                    </el-submenu>

                    <!-- 贫困户 -->
                    <el-submenu index="d">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            <span>贫困户</span>
                        </template>
                        <el-menu-item index="/pinkunhu">贫困户管理</el-menu-item>
                    </el-submenu>

                    <!-- 用户 -->
                    <el-submenu index="e">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户</span>
                        </template>
                        <el-menu-item index="/yonghu">用户管理</el-menu-item>
                    </el-submenu>

                    <!-- 收藏 -->
                    <el-submenu index="f">
                        <template slot="title">
                            <i class="el-icon-edit-outline"></i>
                            <span>收藏</span>
                        </template>
                        <el-menu-item index="/shoucang">收藏管理</el-menu-item>
                    </el-submenu>

                    <!-- 扶贫政策 -->
                    <el-submenu index="g">
                        <template slot="title">
                            <i class="el-icon-tickets"></i>
                            <span>扶贫政策</span>
                        </template>
                        <el-menu-item index="/fupin">扶贫政策管理</el-menu-item>
                    </el-submenu>

                    <!-- 轮播图 -->
                    <el-submenu index="h">
                        <template slot="title">
                            <i class="el-icon-picture"></i>
                            <span>轮播图</span>
                        </template>
                        <el-menu-item index="/lunbotu">轮播图管理</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<style scoped lang="scss">
    .home-container{
        height: 100%;
    }
    .el-header{
        background: rgb(197,195,209);
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        color:white;
        div{
            display: flex;
            align-items:center;
            img{
                width: 50px;
            }
        }
    }
    .el-aside{
        background: rgb(234,232,233);
    }
</style>